<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="选择工具" autoBack>
			</u-navbar>
		</view>


		<view class="con-body">
			<view style="padding: 20rpx; color: #0B868E;">
				{{note}}
			</view>
			<!-- 填写信息 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-left: 30rpx; padding-right: 30rpx;">
							<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
								<u-form-item label="预约时间" leftIcon="https://s4.ax1x.com/2022/03/04/bUZxPS.png"
									prop="time" labelWidth="100" borderBottom @click="showTime = true; hideKeyboard()">
									<u-input disabled v-model="model1.time" placeholder="请选择预约时间" border="none"
										disabledColor="#FFFFFF" style="background-color: #FFFFFF;">
									</u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>
							</u-form>
						</view>
						<u-line></u-line>
						<view style="padding: 30rpx;">
							<view v-for="(item, index) in toolsList">
								<view
									style="height: 60rpx; line-height: 60rpx; background-color: #eeeeee; margin-top: 20rpx; border-radius: 10rpx; padding-left: 30rpx;">
									{{item.name}}
									<view v-if="item.status == 0" style="float: right; margin: 10rpx 30rpx;"
										@click="plus(item, index)">
										<u-icon name="plus-circle" size="24"></u-icon>
									</view>
									<view v-if="item.status == -1" style="float: right; margin-right: 30rpx;">
										<text>已借出</text>
									</view>
								</view>
							</view>
							<view class="uni-cell-90" style="width: 100%;">
								<view class="iconType2">
									<view class="text1">
										<u-icon name="https://resourse.cnlhjt.com/upload/20220825/1d7402394dc492783df102f7a89bee2b.png"
											:label="'工具箱(' + num + ')'"></u-icon>
									</view>
									<view class="text2" @click="next">
										下一步
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-toast ref="uToast" :loading="true"></u-toast>
			<u-calendar :show="showTime" mode="range" @confirm="timeSelect"></u-calendar>
		</view>
	</view>
</template>

<script>
	import { getKitchenTools } from "@/service/shareService.js";
	export default {
		data() {
			return {
				note: '厨房工具与每天9：00-18：00开放，到物业中心前台登记并使用，使用完请清理干净，损坏按原价赔偿，如有疑问，请咨询服务中心前台',
				showTime: false,
				model1: {
					time: '',
					nid: [],
					tools: [],
					start_time: '',
					end_time: ''
				},
				num: 0,
				toolsList: []
			}
		},
		onLoad() {
			getKitchenTools().then(this.getTools);
		},
		methods: {
			getTools(e){
				if(e.code == 200){
					this.toolsList = e.result;
				}
			},
			timeSelect(e) {
				this.model1.time = e[0] + '~' + e[e.length - 1];
				this.model1.start_time = e[0];
				this.model1.end_time = e[e.length - 1];
				this.showTime = false;
			},
			plus(item1, index) {
				var a = this.model1.nid.indexOf(item1.id);
				if(a > -1){
					this.$refs.uToast.show({
					
						type: 'error',
						message: '请勿重复点击'
					})
				}else{
					
					this.num++;
					this.toolsList[index].status = 1;
					this.model1.nid.push(item1.id);
					this.model1.tools.push(item1.name);
				}
			},
			minus(index) {
				this.num--;
				this.toolsList[index].status = 0;
			},
			next() {
				if(this.model1.time == ''){
					this.$refs.uToast.show({
					
						type: 'error',
						message: '请选择预约时间'
					})
					return;
				}
				this.$u.route({
					url: "/pagesShare/kitchen/tool-detail",
					params: {
						item: JSON.stringify(this.model1)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.iconType2 {
		position: fixed;
		bottom: 60rpx;
		display: flex;
		border: #E1E1E1 1rpx solid;
		border-radius: 40rpx;
		justify-content: space-between;
		width: 90%;
		margin-left: 1%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.text1 {
			color: red;
			margin-top: 27rpx;
			width: 30%;
			margin-left: 200rpx;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 30%;
			background-image: url("https://resourse.cnlhjt.com/upload/20220825/79b8644697f64c4b587f78e6d891f1e8.png");
			background-size: 100% 100%;
		}
	}
</style>
